const gameArr = [
    {
        id: 1,
        downloadPic: '../img/sdxl1.png',
        gamePic: '../img/sjyx_sdxl1.jpg',
        gameName: '神雕侠侣',
        gameDes: '游戏讲述蒙古军入侵南宋，郭靖、神雕侠等英雄豪杰保卫南宋的故事。玩家可以扮演古墓派、丐帮、孤独派等门派职业，与郭靖他们一起，去保卫南宋疆土。游戏引入宝石系统、染色系统、天命系统等战斗养成系统，还引入了英雄大会、阵营战、比武擂台等PVP玩法',
    },
    {
        id: 2,
        downloadPic: '../img/sdxl2.png',
        gamePic: '../img/sjyx_sdxl2.jpg',
        gameName: '神雕侠侣2',
        gameDes: '游戏讲述了南宋末年，大宋朝处于内忧外患的故事，玩家可以扮演大理、桃花、丐帮、密宗、古墓、白驼、孤独等7种不同门派的职业，去协助郭大侠他们保卫襄阳，并匡扶大宋江山',
    },
    {
        id: 3,
        downloadPic: '../img/hxht.png',
        gamePic: '../img/sjyx_hxht.jpg',
        gameName: '华夏宏图',
        gameDes: '《华夏宏图》是历史题材的单机策略的游戏，包含了攻城略地和治国养民。历史剧本涵盖汉朝至明末。结合了古代自然经济规律以及完整的国力情报，紧扣历史教材事件，以最大的历史地理代入感，呈现在游戏过程中。',
    },
    {
        id: 4,
        downloadPic: '../img/zgxq.png',
        gamePic: '../img/sjyx_zgxq_.jpg',
        gameName: '中国象棋',
        gameDes: '中国象棋是一种古老的棋类游戏，在中国已经大约有两千年的历史了，是中华文明非物质文化经典产物。中国象棋手游就是以此为主题的二人对战游戏，玩家经典使人乐此不疲。',
    },
    {
        id: 5,
        downloadPic: '../img/sgs.png',
        gamePic: '../img/sjyx_sgs.jpg',
        gameName: '三国杀',
        gameDes: '《三国杀》是中国传媒大学动画学院2004级游戏专业学生设计，由北京游卡桌游文化发展有限公司出版发行的一款桌上游戏，并在2009年6月底由杭州边锋网络技术有限公司开发出网络游戏。该游戏融合了西方类似游戏的特点，并结合中国三国时期背景，以身份、势力或阵营等为线索，以卡牌为形式，合纵连横，经过一轮一轮的谋略和动作获得最终的胜利。',
    },
    {
        id: 6,
        downloadPic: '../img/hlddz.png',
        gamePic: '../img/sjyx_hlddz.jpg',
        gameName: '欢乐斗地主',
        gameDes: '《斗地主》最初流行于湖北武汉汉阳区，两个农民联合对抗一名地主，由于其规则简单、娱乐性强，迅速风靡全国。《欢乐斗地主》是在传统规则的基础上，引入"欢乐豆"积分，并且增加抢地主、明牌、癞子等一系列新玩法，而推出的一款更紧张刺激、更富于变化的"斗地主"游戏。',
    },
    {
        id: 7,
        downloadPic: '../img/xxl.png',
        gamePic: '../img/sjyx_kxxxl.jpg',
        gameName: '开心消消乐',
        gameDes: '《开心消消乐》是一款乐元素研发的一款三消类休闲游戏。2013年8月，正式在网页版上线，2014年2月推出iOS版本， [20]  2014年4月推出安卓版本',
    },
    {
        id: 8,
        downloadPic: '../img/wzry.png',
        gamePic: '../img/sjyx_wzry.jpg',
        gameName: '王者荣耀',
        gameDes: '王者荣耀中的玩法以竞技对战为主，玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战，还可以参加游戏的冒险模式，进行PVE的闯关模式，在满足条件后可以参加游戏的排位赛等，是属于推塔类型的游戏。',
    }
];
const shopArr = [
    {
        id: 1,
        shopName: 'iPhoneXR',
        shopPic: '../img/iphone.png',
    },
    {
        id: 2,
        shopName: '再接再厉',
        shopPic: '../img/xlian.png',
    },
    {
        id: 3,
        shopName: 'i111 TD',
        shopPic: '../img/td.png',
    },
    {
        id: 4,
        shopName: 'ipad',
        shopPic: '../img/ipad.png',
    },
    {
        id: 5,

        shopName: '再接再厉',
        shopPic: '../img/xlian.png',
    },
    {
        id: 6,
        shopName: '0.1 BTC',
        shopPic: '../img/btc.png',
    },
];
// 触底加载数据
const dataArr = [
    {
        time: '2022.1.2 15:30',
        shop: 'iPhoneXR',
    },
    {
        time: '2022.1.2 15:30',
        shop: 'i111 TD',
    },
    {
        time: '2022.1.2 15:30',
        shop: 'ipad',
    },
    {
        time: '2022.1.2 15:30',
        shop: '0.1 BTC',
    },
    {
        time: '2022.1.2 15:30',
        shop: 'iPhoneXR',
    },
    {
        time: '2022.1.2 15:30',
        shop: 'i111 TD',
    },
    {
        time: '2022.1.2 15:30',
        shop: 'ipad',
    },
    {
        time: '2022.1.2 15:30',
        shop: '0.1 BTC',
    },

];
const discBoxNode = document.querySelector('.discBox');
const luckyDrawBtn = document.querySelector('.luckyDrawBtn');
const LotteryNumberNode = document.querySelector('.LotteryNumber');
// 中奖和次数弹框
const maskDialog = document.querySelector('.mask');
//关闭按钮
const closeBtn = document.querySelector('.close');
// 好的或者确定按钮
const confirmBtn = document.querySelector('.mask .dialog button');
//中奖人信息滚动轮播
const luckyDrawSildeNode = document.querySelector('.luckyDrawTop .silde');
const tryGameNode = document.querySelector('.tryGame');
const desNode = document.querySelector('.more .textBox .des');
const sildeitemBoxNode = document.querySelector('.slideBox .sildeCenter .sildeBox .itemBox');
const moreBtn = document.querySelector('.slideBox .sildeTop .more button');
const sildeNavNode = document.querySelector('.slideBox .sildeCenter .slideNav');
// 提示框标签
const promptSpanNode = document.querySelector('.dialog .prompt span');
// 提示框内容
const shopH3Node = document.querySelector('.dialog .shop h3');
// 提示框图片
const imgPic = document.querySelector('.dialog .shop .imgBox img');

const resultsNavNode = document.querySelector('.resultsNav');

//转盘的宽度
let discBoxW = getComputedStyle(discBoxNode).width.slice(0, -2);

//角度
let angle;
//转盘的个数
let count = shopArr.length;

//中奖的数
let winningNum
//判断当前是否正在抽奖
let flag = true;
//抽奖的次数
let lotteryNum = 4;

//设置抽奖次数
LotteryNumberNode.innerHTML = lotteryNum;
//旋转多少的角度360度除去扇叶的个数
angle = 360 / count;
//抽奖人信息的下标
let index = 0;
// 限制滚动时的频率
let isScroll = true;

render();
//渲染轮播图和抽奖奖品信息
function render() {
    let gameNameStr = '';
    let gameDesStr = '';
    let gameDownLeftStr = '';
    let gameDownRightStr = '';
    let gameDownStr = '';
    let gameStr = '';
    //抽奖商品
    let shopStr = '';
    gameArr.forEach((item, index) => {
        //游戏名称
        gameNameStr += `<p>${item.gameName}</p>`;
        // 游戏描述
        gameDesStr += `<p>${item.gameDes}</p>`;
        //游戏的图片
        gameStr += `
                <div class="item">
                    <img src="${item.gamePic}" alt="">
                </div>
            `;
        //游戏下载图标

        if (index < 4) {
            gameDownLeftStr += `
                        <li data-index='${index}'>
                            <img src="${item.downloadPic}" alt="">
                        </li>
            `;
        } else {
            gameDownRightStr += `          
                        <li data-index='${index}'>
                            <img src="${item.downloadPic}" alt="">
                        </li>
            `;
        }
    })
    gameDownStr += `
            <ul class="navLeft">
                ${gameDownLeftStr}
            </ul>
            <ul class="navRight">
                ${gameDownRightStr}
            </ul>
            `;
    // 游戏名称并初始化
    tryGameNode.innerHTML = gameNameStr;
    tryGameNode.firstElementChild.classList.add('scaleIn');
    // 游戏描述
    desNode.innerHTML = gameDesStr;
    desNode.firstElementChild.classList.add('leftIn');
    //游戏的图片
    sildeitemBoxNode.innerHTML = gameStr;
    // 游戏下载图标
    sildeNavNode.innerHTML = gameDownStr;
    //初始的激活类
    sildeNavNode.children[0].firstElementChild.classList.add('active');
    // 给了解更多绑定当前点击的下标,默认绑定第一个
    moreBtn.setAttribute('data-index',0);

    shopArr.forEach(item => {
        shopStr += `
                <div class="item">
                    <div class="text">
                        <p>${item.shopName}</p>
                        <div class="imgBox">
                            <img src="${item.shopPic}" alt="">
                        </div>
                    </div>
                </div>
        `;
    })
    //添加到转盘
    discBoxNode.innerHTML = shopStr;
}
//点击轮播图小图标，切换到对应位置
sildeNavNode.addEventListener('click', (e) => {
    if (e.target.matches('.slideNav li img')) {
        let index = e.target.parentNode.dataset.index;
        sildeitemBoxNode.style.transform = `translateX(${-14.93 * index}vw)`;
        // 当前激活类
        document.querySelector('.slideNav .active').classList.remove('active');
        e.target.parentNode.classList.add('active');
        //左边文字显示与隐藏
        document.querySelector('.tryGame .scaleIn').classList.add('scaleOut');
        document.querySelector('.tryGame .scaleIn').classList.remove('scaleIn');
        tryGameNode.children[index].classList.add('scaleIn');
        //右边文字显示与隐藏
        document.querySelector('.des .leftIn').classList.add('leftOut');
        document.querySelector('.des .leftIn').classList.remove('leftIn');
        desNode.children[index].classList.add('leftIn');
        // 给了解更多绑定当前点击的下标，跳转
        moreBtn.setAttribute('data-index',index);
    }
})

//克隆第一个放到最后一个
luckyDrawSildeNode.appendChild(luckyDrawSildeNode.firstElementChild.cloneNode(true));
//中奖信息轮播
setInterval(() => {
    index++;
    if (index == luckyDrawSildeNode.childElementCount - 1) {

        luckyDrawSildeNode.addEventListener('transitionend', () => {
            index = 0;
            luckyDrawSildeNode.style.transition = 'none';
            luckyDrawSildeNode.style.transform = `translateY(${-3 * index}vw)`;
            getComputedStyle(luckyDrawSildeNode).transition;
            luckyDrawSildeNode.style.transition = '';
        }, { once: true })
    }
    luckyDrawSildeNode.style.transform = `translateY(${-3 * index}vw)`;
}, 3000);




//点击抽奖按钮
luckyDrawBtn.addEventListener('click', () => {
    //如果没有次数，弹出提示框，提示没有次数
    if (!lotteryNum) {


        promptSpanNode.innerHTML = `很遗憾`;
        shopH3Node.innerHTML = `今日次数已经抽完啦~`;
        imgPic.src = `../img/box.png`;

        maskDialog.style.display = 'block';
    }
    if (flag && lotteryNum) {
        //当转盘在转动时,设置成false，不让点击
        flag = false;
        lotteryNum--;
        let num = Math.floor(Math.random() * (120 - 80 + 1) + 80);
        //圈数
        let turns = Math.ceil(num / count);
        //中奖的数
        winningNum = num % count;
        //让转盘转动360*圈数+角度*中奖的数
        discBoxNode.style.transform = `rotate(${-winningNum * angle + 360 * turns}deg)`;
        discBoxNode.style.transition = ` all 10s cubic-bezier(.51,.45,.08,.93)`;
        //设置抽奖次数
        LotteryNumberNode.innerHTML = lotteryNum;

    }
});

//当转盘转完
discBoxNode.addEventListener('transitionend', () => {
    discBoxNode.style.transition = 'none';
    discBoxNode.style.transform = `rotate(${-winningNum * angle}deg)`;
    // 中奖商品
    let shopInfo = shopArr[winningNum];

    if (shopInfo.shopName == '再接再厉') {
        promptSpanNode.innerHTML = `很遗憾`;
    } else {
        promptSpanNode.innerHTML = `恭喜你`;
    }
    shopH3Node.innerHTML = `${shopInfo.shopName}`;
    imgPic.src = `${shopInfo.shopPic}`;

    // 抽奖完成后，跳出中奖商品
    maskDialog.style.display = 'block';

    //当动画完成后，重新设置回true，允许继续抽奖
    flag = true;

});

//确定按钮隐藏提示框
confirmBtn.addEventListener('click', () => {
    maskDialog.style.display = 'none';
});
//点击关闭按钮，隐藏提示框
closeBtn.addEventListener('click', () => {
    maskDialog.style.display = 'none';
});


//每个扇叶旋转60度
[...discBoxNode.children].forEach((item, index) => {
    item.style.borderTopWidth = `${discBoxW / 2}px`;
    item.style.borderLeftWidth = `${getBorderWidth(angle)}px`;
    item.style.borderRightWidth = `${getBorderWidth(angle)}px`;
    item.style.transform = ` translateX(-50%) rotate(${angle * index}deg)`;
})

// 计算左右边框的宽度=tan角度*discBoxNode宽度的一半
function getBorderWidth(angle) {
    let rad = (angle / 2) * Math.PI / 180;
    return Math.tan(rad) * (discBoxW / 2)
}

resultsNavNode.addEventListener('scroll', () => {

})

resultsNavNode.addEventListener('scroll', getscroll);

// 滚动进行操作的函数
function getscroll() {
    if (isScroll) {
        isScroll = false;

        // 限制滚动触发频率
        setTimeout(() => {
            // 获取滚动的高度
            let scrollTop = resultsNavNode.scrollTop;
            // 获取内容的高度
            let resultsNavNodeHight = resultsNavNode.scrollHeight;
            // 获取可视区域的高度
            let resultsNavClientHeight = resultsNavNode.clientHeight;
            // 判断如果可视高度+滚动滚动>内容高度，说明已经到底了
            if (scrollTop + resultsNavClientHeight >= resultsNavNodeHight - 100) {
                dataArr.forEach(item => {
                    let li = document.createElement('li');
                    li.innerHTML = `
                                <p class="time">
                                    ${item.time}
                                </p>
                                <p class="result">${item.shop}</p>
                                `;
                    resultsNavNode.firstElementChild.appendChild(li);
                });
            }
            isScroll = true;
        }, 100)
    }
}